<template>
  <div class="list">
    <scroll-view scroll-y>
      <div v-if="type=='入库'||type=='出库'">
        <div class="list_main" @click='go_detail'  :data-item="item"   v-for="(item,index) in data"
          :key="index">
          <div class="div_header_flex">
            <span class='div_header_flex_one_span'>{{item.carTypeName}}{{item.carBrandName}}{{item.carSeriesName}}</span>
            <!-- <span>时间</span> -->
          </div>
          <div class="div_header_flex">
            <span class="spanFont">{{item.dealerName}}</span>
          </div>
          <div>车架号：{{item.carVin}}</div>
          <div class="div_bottom_flex">
            <span>订单号 {{item.orderNumber}}</span>
            <!-- <span class='div_bottom_flex_two_span'  v-if="type=='入库'?false:true">时间</span> -->
            <!-- 入库是没有时间的，晚点修改下 -->
          </div>
        </div>
      </div>


      <div v-if="type=='移库'">
        <div class="list_main" @click='go_detail' :data-id="item.id" :data-idCode="item.idCode" v-for="(item,index) in data.list"
          :key="index">
          <div class="div_header_flex">
            <span class='div_header_flex_one_span'>汽车车系车型吧 {{item.carName}}</span>
            <span>已借出</span>
          </div>
          <div>车架号：{{item.carNumber}}</div>
          <div>现存放地：十级房隆盛科技弗兰克进水立方就考试了</div>
          <div class="div_bottom_flex">
            <div class='div_bottom_flex_icon'>
              <div class="icon_car">A物流园</div>
              <div class="icon"></div>
              <div class="icon_car">B物流园</div>
            </div>
            <span class='div_bottom_flex_two_span'>时间</span>
          </div>
        </div>
      </div>

      <div v-if="type=='回款平台确认'||type=='回款资金方确认'">
        <div class="list_main" @click='go_detail' :data-id="item.id" :data-idCode="item.idCode" v-for="(item,index) in data.list"
          :key="index">
          <div class="div_header_flex">
            <span class='div_header_flex_one_span'>汽车车系车型吧</span>
            <!-- <span>时间</span> -->
            <span>28.9万</span>
          </div>
          <div class="div_header_flex">
            <span class="spanFont">公司名称</span>
            <span>平台已确认</span>
          </div>
          <div>车架号：</div>
          <div class="div_bottom_flex">
            <span>订单号</span>
            <span class='div_bottom_flex_two_span'>时间</span>
          </div>
        </div>
      </div>

      <div v-if="type=='自采车辆出库申请'||type=='出库申请业务确认'">
        <div class="list_main" @click='go_detail' :data-id="item.id" :data-idCode="item.idCode" v-for="(item,index) in data"
          :key="index">
          <div class="div_header_flex">
            <span class='div_header_flex_one_span'>{{item.carName}}</span>
            <span v-if="type=='出库申请业务确认'?false:true">{{item.statusString}}</span>
            <!-- 出库申请业务确认是没有这个span的 -->
          </div>
          <div class="div_header_flex">
            <span class="spanFont">{{item.dealerName}}</span>
          </div>
          <div>车架号：{{item.vin}}</div>
          <div class="div_bottom_flex">
            <span>{{item.applyCode}}</span>
            <span class='div_bottom_flex_two_span'>{{item.applyTime}}</span>
          </div>
        </div>
      </div>

      <div v-if="type=='到店业务审核'||type=='到店高管审核'||type=='到店交付'">
        <div class="list_main" @click='go_detail' :data-id="item.id" :data-idCode="item.idCode" v-for="(item,index) in data.list"
          :key="index">
          <div class="div_header_flex">
            <span class='div_header_flex_one_span'>汽车车系车型吧 {{item.carName}}</span>
            <!-- <span>时间</span> -->
          </div>
          <div class="div_header_flex">
            <span class="spanFont">公司名称 {{item.name}}</span>
          </div>
          <div>车架号：{{item.carNumber}}</div>
          <div class="div_bottom_flex">
            <span>订单号 {{item.carId}}</span>
            <span class='div_bottom_flex_two_span'>申请时间:sklfklsdk</span>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  export default {
    methods: {
      go_detail(e) {
        //去往各页面的详情页面，主页面传个值来区分去往哪个页面  
        // 暂时写死
        const id = e.mp.currentTarget.dataset.id;
        const idCode = e.mp.currentTarget.dataset.idcode;
        const item = e.mp.currentTarget.dataset.item;
        console.dir(item);
        console.dir(this.type)
        switch (this.type) {
          case "入库":        //入库没写详情接口，直接将所有参数带过去
            wx.navigateTo({
              url: `/pages/depotEnterDetail/main?item=${JSON.stringify(item)}`
            })
            break;
          case "移库":
            wx.navigateTo({
              url: `/pages/depotMoveAdd/main?id=${id}&idCode=${idCode}`
            })
            break;
          case "出库":
            wx.navigateTo({
              url: `/pages/depotOutDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
          case "回款资金方确认":
            wx.navigateTo({
              url: `/pages/financialCapitalDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
          case "回款平台确认":
            wx.navigateTo({
              url: `/pages/financialPlatformDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
          case "自采车辆出库申请":
            wx.navigateTo({
              url: `/pages/carBusinessApplyDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
              case "出库申请业务确认":
            wx.navigateTo({
              url: `/pages/carBusinessConfirmDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
              case "到店业务审核":
            wx.navigateTo({
              url: `/pages/carBusinessAuditingDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
            case "到店高管审核":
            wx.navigateTo({
              url: `/pages/carBusinessAuditingDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
            case "到店交付":
            wx.navigateTo({
              url: `/pages/depotPayDetail/main?id=${id}&idCode=${idCode}`
            })
            break;
          default:
            break;
        }
      }
    },
    props: ["type", "data"]
  }
</script>

<style lang="scss" scoped>
  .list {
    padding: 0 20rpx;
    margin-top: 60rpx;
    height: 100%;

    scroll-view {
      height: 100%;
    }

    .list_main {
      width: 100%;
      color: #999999;
      font-size: 26rpx;
      border-bottom: 1rpx solid #f2f2f2;
      margin-bottom: 10rpx;

      div {
        margin-bottom: 20rpx;
        text-align: left;
      }

      .div_header_flex {
        display: flex;
        justify-content: space-between;
        font-size: 33rpx;
        font-weight: bold;
        color: black;

        .div_header_flex_one_span {
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 70%;
          overflow: hidden;
          color: black;
        }

        span:nth-child(2) {
          color: #FEA639
        }
      }

      .div_bottom_flex {
        display: flex;
        justify-content: space-between;
        color: #aaa;

        .div_bottom_flex_icon {
          display: flex;
          justify-content: space-between;
          align-items: center;
          max-width: 40%;
          min-width: 40%;
          font-size: 20rpx;

          .icon_car:before {
            content: "";
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            background: url('../../../static/images/car.png') no-repeat;
            background-size: cover;
            vertical-align: middle;
            margin-right: 10rpx;
          }

          .icon {
            width: 40rpx;
            height: 2px;
            background-color: #65B5F1;
            position: relative;

          }

          .icon:before {
            content: "";
            width: 10rpx;
            height: 10rpx;
            border-top: 1rpx solid #65B5F1;
            border-right: 1rpx solid #65B5F1;
            position: absolute;
            right: -2rpx;
            top: -3rpx;
            transform: rotate(45deg);
          }
        }

        .div_bottom_flex_two_span {
          font-size: 20rpx;
        }
      }
    }

    .list_main:last-child {
      border: none;
    }
  }

  /*工具类*/
  .spanFont {
    font-size: 28rpx;
    color: #aaa;
    font-weight: normal;
  }
</style>
